<template>
    <div v-loading="loading">
        <el-form :model="form" :rules="rules" ref="form" @submit.native.prevent>

            <el-form-item label="模块名称" prop="name" :label-width="formLabelWidth">
                <el-input v-model.trim="form.name" maxlength="10"></el-input>
            </el-form-item>

            <el-form-item label="所属模块" :label-width="formLabelWidth">
                <el-input v-model="form.parent.name" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="模块代码" prop="code" :label-width="formLabelWidth">
                <el-input v-model.trim="form.code" :disabled="isEdit"></el-input>
            </el-form-item>

            <el-form-item label="所属角色" prop="roles" :label-width="formLabelWidth">
                <xy-role-select style="width: 390px" v-model="form.roles" :multiple="true"></xy-role-select>
            </el-form-item>

            <el-form-item label="模块类型" prop="type" :label-width="formLabelWidth">
                <xy-view-widget-type-select :disabled="isEdit" v-model.trim="form.type"></xy-view-widget-type-select>
            </el-form-item>

            <el-form-item label="是否可用" prop="enabled" :label-width="formLabelWidth">
                <el-switch
                        v-model="form.enabled"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item>

            <el-form-item v-show="showIconField" label="模块图标" prop="icon" :label-width="formLabelWidth">
                <el-input v-model.trim="form.icon">
                    <template slot="prepend"><i :class="form.icon"></i></template>
                </el-input>
            </el-form-item>

            <el-form-item v-show="showUrlField" label="URL" prop="url" :label-width="formLabelWidth">
                <el-input v-model.trim="form.url"></el-input>
            </el-form-item>

            <el-form-item label="排序号" prop="rank" :label-width="formLabelWidth">
                <el-input-number style="width: 215px" v-model.number="form.rank" :min="1" :max="1000"></el-input-number>
            </el-form-item>

        </el-form>
        <div style="text-align: right">
            &emsp;&emsp;&emsp;&nbsp;&nbsp;
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button :disabled="isEdit" @click="resetForm">重置</el-button>
        </div>
    </div>
</template>

<script>
    import xyRoleSelect from '../user_info/select/RoleSelect.vue';
    import xyViewWidgetTypeSelect from './select/ViewWidgetTypeSelect.vue';
    import xyViewWidgetSceneSelect from './select/ViewWidgetSceneSelect.vue';

    export default {
        components: {
            xyRoleSelect,
            xyViewWidgetTypeSelect,
            xyViewWidgetSceneSelect
        },
        mounted() {
            if (this.entity.id && this.method === 'PUT') {
                this.loadData();
            }
        },
        props: {
            viewWidget: undefined,
            entity: {
                type: Object,
                default() {
                    return {
                        id: null,
                        parent: {}
                    };
                },
            },
            method: { //如果添加，就用post，修改就用put
                required: true
            },
            version: undefined,
        },
        computed: {
            isEdit: function () {  //如果是【修改操作】则返回 true，
                return this.method === 'PUT';
            },
            showUrlField() {
                return this.form.type === 'NAV_BAR';
            },
            showIconField() {
                return this.form.type === 'NAV_BAR';
            }
        },
        data() {
            return {
                form: {
                    id: this.entity.id,
                    name: '',
                    code: '',
                    parent: this.entity.parent,
                    url: '',
                    type: undefined,
                    scene: this.viewWidget,
                    roles: [],
                    icon: '',
                    enabled: true,
                    rank: 0,
                },
                loading: false,
                formLabelWidth: '120px',
                rules: {
                    name: [
                        {required: true, message: '请输入模块名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择类型', trigger: 'change'},
                    ],
                    code: [
                        {required: true, message: '请输入代码'}
                    ],
                    roles: [
                        {required: true, message: '请选择角色'}
                    ],
                    scene: [
                        {required: true, message: '请选择设备类型'}
                    ]
                }
            }
        },
        methods: {
            onSubmit: function () {
                //参数验证
                let verify = false;
                this.$refs.form.validate((valid) => {
                    verify = valid;
                });
                if (!verify) {
                    return
                }
                this.loading = true;
                this.$ajax.request({
                    url: '/auth/view_widget/sync',
                    method: this.method,
                    data: this.form
                }).then(res => {
                    this.loading = false;
                    if (res.code !== "ok") {
                        this.$message.error(res.msg);
                    } else {
                        this.resetForm();
                        this.$emit('submitSuccess', res); //添加成功
                    }
                });
            },
            /**
             * 装载数据，更新使用
             */
            loadData: function () {
                this.resetForm();
                if (!this.entity.id || this.method === 'POST') {
                    return;
                }
                this.loading = true;
                this.$ajax.get('/auth/view_widget/get/' + this.entity.id).then(res => {
                    this.loading = false;
                    if (res.code === "ok") {
                        this.form = Object.assign({}, this.form, res.data);
                        return;
                    }
                    this.$message.error(res.msg);
                });

            },
            resetForm() {
                this.$refs.form.clearValidate();
                this.$refs.form.resetFields();
            }
        },
        watch: {
            version() {
                this.loadData();
            },
            //监听对象
            entity: {
                handler(val) {
                    this.form = Object.assign(this.form, val);
                },
                deep: true
            }
        },
    }
</script>

<style scoped="scoped">

</style>
